<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 在 HTML 中是 kebab-case 的 -->
        <blog-post post-title="hello!"></blog-post>
    </div>
</body>

<script type="text/javascript">

    Vue.component('blog-post', {
        // 在 JavaScript 中是 camelCase 的
        props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],
        //或者
        props: {
            title: String,
            likes: Number,
            isPublished: Boolean,
            commentIds: Array,
            author: Object,
            callback: Function,
            contactsPromise: Promise // or any other constructor
        },
        template: '<h3>{{ postTitle }}</h3>'
    })
    //重申一次，如果你使用字符串模板，那么这个限制就不存在了。
</script>

</html>